<template>
    <div >
      大文件上传
      <div>
        <input type="file" @change="uploadFile" />
      </div>
      <button @click="uploadBtn">点击上传</button>
      <div class="progress">
          <div class="progress-bar"></div>
      </div>
      <!-- 上传进度、花费时间 -->
       <div>
          <div>上传进度：{{progress + '%'}}</div>
          <div>花费时间：{{spendTime + '秒'}}</div>
       </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    name: 'App',
    data() {
      return {
        file: null,//文件实例
        chunk_size: 1024 * 1024 * 100,//分片大小1m
        file_total: 0,//文件总大小
        chunks: 0,//分片的片数
        currentChunk: 0,//当前上传的分片序号
        start:0,//文件分片开始位置
        end:0,//文件分片结束位置
        loaded: 0,//已上传大小
        progress:0,//上传进度
        spendTime: 0,//上传耗时
        startTime: 0,//开始上传时间
        endTime: 0,//结束上传时间
      }
    },
    methods: {
      uploadFile(e) {
        // 文件本身
        this.file = e.target.files[0]
        // 文件大小
        this.file_total = e.target.files[0].size
        // 分片
        this.chunks = Math.ceil(this.file_total / this.chunk_size)
        console.log('文件本身', this.file);
        console.log('文件大小', this.file_total / 1024 / 1024 + 'm');
        console.log('分片数', this.chunks);
  
      },
      uploadBtn() {
        if (!this.file) {
          alert('没有文件不能上传！')
          return
        }
        this.startTime = new Date().getTime()
        console.log('开始上传的时间',this.startTime );
        
        this.upload()
      },
      upload() {
        if (this.currentChunk >= this.chunks) {  //664 664
          alert('上传完成')
          return
        }
        const formData = new FormData()
        this.start = this.currentChunk * this.chunk_size
        this.end = Math.min(this.start + this.chunk_size, this.file_total)
        // 文件片段
        const chunk = this.file.slice(this.start, this.end)
        console.log('分片', chunk)
        // 文件
        formData.append('file', chunk, this.file.name)
        // 分片索引
        formData.append('chunkNumber', this.currentChunk)
        // 分片总数
        formData.append('totalChunks', this.chunks)
        // 唯一标识
        formData.append('identifier', this.file.name)
        // 文件名字
        formData.append('filename', this.file.name)
        axios.post('http://localhost:3001/api/upload/uploadChunk', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.currentChunk++
            this.loaded += this.end - this.start
            
            // 进度条实现
            let progress = Math.floor(this.loaded / this.file.size * 100)
            console.log('上传进度',progress);
             // 设置 progress-bar 的宽度
            const progressBar = document.querySelector('.progress-bar')
            if (progressBar) {
              progressBar.style.width = `${progress}%`
            }
            // 上传耗时的计算
            this.endTime = new Date().getTime()
            // 花费的时间计算
            this.spendTime = ((this.endTime - this.startTime) / 1000).toFixed(2)
  
            // 上传的进度
            this.progress  = progress
            
            this.upload()
          }
        })
      }
    }
  }
  </script>
  
  <style>
        .progress{
          
              width: 300px;
              height: 25px;
              border: 2px solid;
              margin-top: 10px;
              text-align: center;
          }
          .progress-bar{
              width: 0;
              height: 100%;
              background-color: aquamarine;
          }
  </style>
  